<template>
  <div class="city-detail">
    <header-view>
      <template #add>
        <i
          class="fa-solid fa-plus text-white cursor-pointer"
          v-show="!isShow"
          @click="handleClick"
        ></i>
      </template>
    </header-view>
    <main>
      <div class="tip text-center w-full text-white p-2">
        <span>
          你正在预览{{ city }}的天气信息
          <span v-show="!isShow">，可以通过右上角的"+"号按钮保存起来</span>
        </span>
      </div>
      <!-- TODO: 天气信息展示 -->
      <div
        class="container px-40 flex flex-col text-center text-white mt-6 gap-4"
      >
        <h3>当日气温是:{{ searchweather.temperature }}℃</h3>
        <h3>当日天气是:{{ searchweather.weather }}</h3>
        <h3>当日风向是:{{ searchweather.winddirection }}风</h3>
        <h3>当日风力是:{{ searchweather.windpower }}级</h3>
      </div>
      <hr class="border-cyan-600 mt-6" />
      <div class="container px-40 w-full rounded mt-2">
        <div class="box">
          <ul class="flex gap-6 text-white">
            <li
              class="flex flex-col flex-1 text-center gap-4"
              v-for="item in searchforecast"
              :key="item.index"
            >
              <span>{{ item.week }}</span>
              <span>{{ item.date }}</span>
              <span>{{ item.dayweather }}</span>
              <span>风力{{ item.daypower }}级</span>
            </li>
          </ul>
          <!-- 图表部分 -->
          <div class="chart mt-6">
            <v-chart :option="option"> </v-chart>
          </div>
        </div>
        <!-- 文字部分 -->
      </div>
    </main>
  </div>
</template>
<script>
import HeaderView from "@/components/HeaderView.vue";
import { useSearchStore } from "../stores/index";
import { mapState, mapActions } from "pinia";
export default {
  components: {
    HeaderView,
  },
  data() {
    return {
      option: {},
      isShow: false,
    };
  },
  props: {
    city: String,
  },
  computed: {
    ...mapState(useSearchStore, [
      "searchcity",
      "searchweather",
      "searchforecast",
      "CityList",
    ]),
    daytemp() {
      return this.searchforecast.map((item) => item.daytemp);
    },
    nighttemp() {
      return this.searchforecast.map((item) => item.nighttemp);
    },
  },
  methods: {
    ...mapActions(useSearchStore, ["getSearchInfo", "AddCityList"]),
    handleClick() {
      this.isShow = false;
      this.AddCityList(this.city);
    },
    renderChart(a, b) {
      this.option = {
        xAxis: {
          type: "category",
          show: false,
        },
        yAxis: {
          type: "value",
          show: false,
        },
        grid: {
          top: 40,
          left: 0,
          right: 0,
          bottom: 0,
        },
        series: [
          {
            name: "白天温度",
            type: "line",
            data: a,
            smooth: true,
            label: {
              color: "#fff",
              show: true,
              position: "top",
              formatter: "白{c}℃",
            },
          },
          {
            name: "夜晚温度",
            type: "line",
            data: b,
            smooth: true,
            label: {
              color: "#fff",
              show: true,
              position: "bottom",
              formatter: "晚{c}℃",
            },
          },
        ],
      };
    },
  },
  watch: {
    searchforecast: function (newVal) {
      if (newVal) {
        newVal.map((item, index) => {
          const weekMap = {
            1: "一",
            2: "二",
            3: "三",
            4: "四",
            5: "五",
            6: "六",
            7: "日",
          };
          if (index == 0) {
            item.week = "今天";
          } else if (index == 1) {
            item.week = "明天";
          } else {
            item.week = `周${weekMap[item.week]}`;
          }
          item.date = item.date.slice(5);
        });
      } else {
        console.log("没有数据");
      }
    },
    CityList: {
      immediate: true,
      handler(newVal) {
        this.isShow = newVal.some((item) => item.name === this.city);
      },
    },
  },
  mounted() {
    this.getSearchInfo(this.city);
    this.renderChart(this.daytemp, this.nighttemp);
  },
};
</script>
<style scoped>
.tip {
  background: #004e71;
}
.box {
  background: #004e71;
  padding: 40px 40px 20px 40px;
  height: auto;
  .chart {
    width: 100%;
    height: 160px;
    background: transparent;
  }
}
</style>
